$links--item-size: 160px;

.links--container {
  display: block;
  font-size: 0;
  left: 50%;
  margin: 100px 0;
  padding-top: 114px;
  position: relative;
  width: 2 * $diamonds--item-rotated-size;
  z-index: 2;
  @include transform(translateX(-50%));

  @media all and (min-width: 1000px) {
    width: auto;
  }
}

.links--item {
  $margin: floor(($diamonds--item-rotated-size - $diamonds--item-size) / 2);
  color: $black;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
  height: $diamonds--item-size;
  margin: floor($diamonds--item-size / -2) $margin $margin;
  padding: 5 * $grid 0;
  position: relative;
  text-align: center;
  width: $diamonds--item-size;
  z-index: 1;
  @include transition(all 0, background 0.2s);

  &:first-child,
  &:last-child {
    clear: left;
    margin-left: $margin + 1px;
  }

  &:hover {
    z-index: 5;
  }

  &::after {
    $distance: 10px;
    background: $yellow;
    bottom: $distance;
    content: "";
    left: $distance;
    position: absolute;
    right: $distance;
    top: $distance;
    z-index: -1;
    @include transform(rotateZ(45deg));
    @include transition(transform, 0.15s);
  }

  &:hover::after {
    background: $turquoise;
    @include transform(rotateZ(-315deg));
  }

  &::before {
    content: "";
    display: block;
    margin: auto;
    vertical-align: middle;
    z-index: 10;
    @include graphics-sprite(rubygems, $dimensions: true);
    @include transition(transform, 0.15s);
    @include for-hires {
      background-image: $graphics-2x-sprites;
    }
  }

  &:hover::before {
    @include transform(rotateZ(360deg));
  }

  $margin-right: 0;
  @each $name in issues, twitter, example-project {
    &.-#{$name}::before {
      @include graphics-sprite-position($name);
    }
  }
}
